<!--test.vue-->
<template>
  <div class="c-image">
    <a v-if="dataTrigger.link" :href="dataTrigger.link" :target="targetField ? '_blank' : '_self'">
      <!-- <img :src="dataTrigger.imageSrc" /> -->
    </a>
    <div v-else></div>
    <img v-if="dataTrigger.imageSrc" :src="dataTrigger.imageSrc" @click="con(dataTrigger)" />
    <img v-else src="./empty.svg" @click="con(dataTrigger)" />
  </div>
</template>

<script>
// import componentRefresh from '@/mixins/componentRefresh'
export default {
  name: 'CImage',
  // mixins: [componentRefresh],
  props: {
    props: {
      type: Array,
      default: function() {
        return [
          {
            fields: []
          }
        ]
      }
    }
  },
  computed: {
    dataTrigger() {
      // if(this.props[1].fields[0].value.dataJson.json){
      //     let result = this.getResult(this.props[1].fields[0].value.dataJson.json)
      //     return result
      // }
      // else{
      const link = this.props[0].fields[3].value[0].value.value
      const imageSrc = this.props[0].fields[3].value[0].value.value
      return { link, imageSrc }
      // }
    },
    targetField() {
      return this.props[0].fields[4].value[0].value.value
    }
  },
  methods: {
    con(dataTrigger) {
      console.log(dataTrigger.imageSrc)
    },
    getResult(json) {
      let jsonArray = []
      try {
        jsonArray = JSON.parse(json)
      } catch (e) {
        console.warn(e.message)
      }
      const model = this.props[1].fields[0].value.dataJson.model
      const fieldSrc = model[0].field
      const mappingSrc = model[0].mapping
      const keySrc = fieldSrc || mappingSrc

      const fieldLink = model[1].field
      const mappingLink = model[1].mapping
      const keyLink = mappingLink || fieldLink
      return jsonArray.length > 0
        ? {
            imageSrc: jsonArray[0][keySrc],
            link: jsonArray[0][keyLink]
          }
        : {}
    }
  }
}
</script>

<style lang="stylus" scoped>
.c-image{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    img{
        width: 100%;
        height: 100%;
    }
}
</style>
